<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>下拉多选组件</title>
    <link rel="icon" th:href="@{/images/favicon.ico}">
    <link rel="stylesheet" th:href="@{/layuimini/lib/layui-v2.6.3/css/layui.css}" media="all">
    <link rel="stylesheet" th:href="@{/layuimini/css/public.css}" media="all">
</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">
        <div class="ok-body">
            <blockquote class="layui-elem-quote" style="padding: 5px;">
                1.layui第三方扩展组件：<font color="red" size="2">下拉多选(xmSelect)</font>；
                <a href="https://gitee.com/maplemei/xm-select" target="_blank" class="layui-btn layui-btn-sm layui-btn-danger">xmSelect</a>
                <br>
                2.本项目在用户管理功能中用来选择角色，该组件支持下拉树、下拉日期、下拉折叠面板、下拉穿梭框和下拉级联等方式；
            </blockquote>
            <div class="layui-row">
                <div class="layui-col-xs12 layui-col-sm12 layui-col-md6 layui-col-lg6">
                    <pre>
         // Step1. 引入依赖
        let xmSelect = layui.xmSelect;
        <br>

        // Step2. 使用
        xmSelect.render({
            el: '#demo',
            max: 4,
            maxMethod(seles, item){
                alert(`${item.name}不能选了, 最多选4个`)
            },
            data: res.data
        });
                    </pre>
                </div>
                <div class="layui-col-xs12 layui-col-sm12 layui-col-md6 layui-col-lg6">
                    <div id="demo1" class="xm-select-demo" style="padding-top: 10px;"></div>
                </div>
            </div>
        </div>
    </div>
</div>
<!--  引入layui框架js文件-->
<script th:src="@{/layuimini/lib/layui-v2.6.3/layui.js}" charset="utf-8"></script>
<script th:src="@{/layuimini/js/lay-config.js?v=1.0.4}" charset="UTF-8"></script>
<script type="text/javascript" th:inline="javascript">
    layui.use(["code","xmSelect"], function () {
        let code = layui.code;
        let xmSelect = layui.xmSelect;
        let $ = layui.jquery;

        let ctxPath = /*[[@{/}]]*/'';

        code({
            elem: "pre",
            title: "代码示例",
            encoded: true,
            skin:'notepad', //设置显示风格
            about: false
        });

        xmSelectRender();
        function xmSelectRender(){
            $.ajax({
                type:'GET',
                url:ctxPath+'layuimini/api/xmSelect.json',
                dataType:'json',
                success:function (res){
                    if(res.code === 0){
                        xmSelect.render({
                            el: '#demo1',
                            max: 4,
                            maxMethod(seles, item){
                                alert(`${item.name}不能选了, 最多选4个`)
                            },
                            data: res.data
                        });
                    }
                }
            });
        }
    });
</script>
</body>
</html>
